<template>
  <div>
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
      <p class="mt-1 text-sm text-gray-600">Welcome to your admin dashboard</p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- 统计卡片 -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 transform hover:scale-[1.02] transition-transform">
        <div class="flex items-center">
          <div class="p-3 rounded-full bg-blue-100 text-blue-600">
            <i class="fa fa-users"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">Total Users</p>
            <p class="text-2xl font-bold text-gray-900">1,294</p>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 12%
          </span>
          <span class="ml-2 text-gray-500">from last month</span>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 transform hover:scale-[1.02] transition-transform">
        <div class="flex items-center">
          <div class="p-3 rounded-full bg-green-100 text-green-600">
            <i class="fa fa-shopping-cart"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">Total Orders</p>
            <p class="text-2xl font-bold text-gray-900">842</p>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 8%
          </span>
          <span class="ml-2 text-gray-500">from last month</span>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 transform hover:scale-[1.02] transition-transform">
        <div class="flex items-center">
          <div class="p-3 rounded-full bg-purple-100 text-purple-600">
            <i class="fa fa-credit-card"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">Revenue</p>
            <p class="text-2xl font-bold text-gray-900">$24,562</p>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 16%
          </span>
          <span class="ml-2 text-gray-500">from last month</span>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 transform hover:scale-[1.02] transition-transform">
        <div class="flex items-center">
          <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
            <i class="fa fa-eye"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">Page Views</p>
            <p class="text-2xl font-bold text-gray-900">14,231</p>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-red-500 flex items-center">
            <i class="fa fa-arrow-down mr-1"></i> 3%
          </span>
          <span class="ml-2 text-gray-500">from last month</span>
        </div>
      </div>
    </div>
    
    <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 lg:col-span-2">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-semibold text-gray-900">Recent Orders</h2>
          <button class="text-sm font-medium text-blue-600 hover:text-blue-700">View all</button>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1234</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jane Cooper</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 12, 2023</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                    Shipped
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$245.00</td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1235</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Robert Fox</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 11, 2023</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                    Processing
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$180.00</td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1236</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Esther Howard</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 10, 2023</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                    Pending
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$320.00</td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-1237</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jenny Wilson</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 9, 2023</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                    Cancelled
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$95.00</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-semibold text-gray-900">Top Products</h2>
          <button class="text-sm font-medium text-blue-600 hover:text-blue-700">View all</button>
        </div>
        <div class="space-y-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/id/26/60/60" alt="Product" class="w-12 h-12 rounded-md object-cover">
            <div class="ml-3">
              <p class="text-sm font-medium text-gray-900">Wireless Headphones</p>
              <p class="text-sm text-gray-500">128 sold</p>
            </div>
            <div class="ml-auto">
              <span class="text-sm font-medium text-gray-900">$129.00</span>
            </div>
          </div>
          <div class="flex items-center">
            <img src="https://picsum.photos/id/96/60/60" alt="Product" class="w-12 h-12 rounded-md object-cover">
            <div class="ml-3">
              <p class="text-sm font-medium text-gray-900">Smart Watch</p>
              <p class="text-sm text-gray-500">96 sold</p>
            </div>
            <div class="ml-auto">
              <span class="text-sm font-medium text-gray-900">$199.00</span>
            </div>
          </div>
          <div class="flex items-center">
            <img src="https://picsum.photos/id/20/60/60" alt="Product" class="w-12 h-12 rounded-md object-cover">
            <div class="ml-3">
              <p class="text-sm font-medium text-gray-900">Bluetooth Speaker</p>
              <p class="text-sm text-gray-500">74 sold</p>
            </div>
            <div class="ml-auto">
              <span class="text-sm font-medium text-gray-900">$89.00</span>
            </div>
          </div>
          <div class="flex items-center">
            <img src="https://picsum.photos/id/119/60/60" alt="Product" class="w-12 h-12 rounded-md object-cover">
            <div class="ml-3">
              <p class="text-sm font-medium text-gray-900">Smart Home Hub</p>
              <p class="text-sm text-gray-500">63 sold</p>
            </div>
            <div class="ml-auto">
              <span class="text-sm font-medium text-gray-900">$149.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'admin'
})
</script>    